
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>后盾网教学实例-纯javascript实现的超炫3D标签云</h2></title>
<style>
  body{
    font-family:arial;
    background:#EFEDEE;
  }
  h1,h2,h3{
  	text-align: center;
  	font-family: 微软雅黑;
  }
 .one{
	 padding:5px;position:absolute;text-decoration:none;
	  font-size:15px;font-weight:bold;color:#fff;
  }
 .one:hover{
	  background:#ccc;
 }
 .con{
  font-size:12px;
 }
</style>
<script>
   /*
  球坐标系:　 　　x=rsinθcosφ 　　y=rsinθsinφ 　　z=rcosθ 　　　　r= sqrt(x*2 + y*2 + z*2); 　　θ= arctan(y/x); 　　φ= arccos(z/r); 　r∈[0,+∞), 　　φ∈[0, 2π], 　　θ∈[0, π]
  */
   var links;//首先获得所有的标签
   var radius=180;//半径
   var startTop=document.documentElement.clientHeight/2;
   var startWidth=document.documentElement.clientWidth/2;
   var startfont=15;
   var jd=0.05;
   var startArr=[];
   var t1;
   var t2;
   window.onload=function  () {
     links=document.getElementsByTagName("a");
	 main(links);
	 //计算向量
	   var xianglArr=[]; 
	   var x=100;
	   var y=100;
	   var z=0;
       var newx=x/Math.sqrt(x*x+y*y+z*z);
	   var newy=y/Math.sqrt(x*x+y*y+z*z);
       var newz=z/Math.sqrt(x*x+y*y+z*z);
	   xianglArr.push(newx,newy,newz);
	 //运行矩阵函数
	   t1=setInterval(function  () {
	   jd-=0.001;
	   if(jd<=0){
	     clearInterval(t1);
	   }
	      for (var i=0; i<links.length; i++) {
		     var rect=rectarr(xianglArr,jd);
		     var newxyz=rectmath (rect,startArr[i]);
             changeS(newxyz,i);
	      }
	     
	   },60)
	 
	 document.onmousedown=function  (e) {
	   clearInterval(t1);
	   clearInterval(t2);
	    var ev=e||window.event;
	    var downx=ev.clientX
        var downy=ev.clientY;
		var num;
	   document.onmousemove=function  (e) {
	    var ev=e||window.event; 
		var movex=ev.clientX;
        var movey=ev.clientY;
		 num=Math.sqrt((downx-movex)*(downx-movex)+(downy-movey)*(downy-movey))/150;
		downx=movex;
        downy=movey;
		   var xianglArr=[]; 
		   var x=movey-startTop;
		   var y=movex-startWidth;
		   var z=0;
		   var he=Math.sqrt(x*x+y*y+z*z)
		   var newx=x/he;
		   var newy=-y/he;
		   var newz=z/he;
	   xianglArr.push(newx,newy,newz);
			  for (var i=0; i<links.length; i++) {
				 var rect=rectarr(xianglArr,num);
				 var newxyz=rectmath (rect,startArr[i]);
				 changeS(newxyz,i);
			  }

		document.onmouseup=function  (e) {
	       document.onmousemove=null;
		   var ev=e||window.event; 
		   var upx=ev.clientX;
		   var upy=ev.clientY;
		   var xianglArr=[]; 
	       var x=upy-startTop;
		   var y=upx-startWidth;
		   var z=0;
		   var he=Math.sqrt(x*x+y*y+z*z)
		   var newx=x/he;
		   var newy=-y/he;
		   var newz=z/he;
	   xianglArr.push(newx,newy,newz);
	 //运行矩阵函数
	   t2=setInterval(function  () {
	   num*=0.9;
	   if(num<=0.005){
	     clearInterval(t2);
	   }
	      for (var i=0; i<links.length; i++) {
		     var rect=rectarr(xianglArr,num);
		     var newxyz=rectmath (rect,startArr[i]);
             changeS(newxyz,i);
	      }
	     
	   },60)
	   }
		 return false;	 
	   }
	   
       document.onmouseup=function  (e) {
	       document.onmousemove=null;
		     return false;
		   } 
	  return false;
	 }
	
   }

  //以3维的形式随机创建圆上得点
   function create3d () {
     for (var i=0; i<links.length; i++) {
	     var xyzArr=[];
		 var theta= Math.random()*Math.PI;
		 var phi=Math.random()*2*Math.PI
		 var x=radius*Math.sin(theta)*Math.cos(phi);
		 var y=radius*Math.sin(theta)*Math.sin(phi);
		 var z=radius*Math.cos(theta);
		 xyzArr.push(x,y,z,1);
		 startArr.push(xyzArr);
	 }
   }

   //三维转二维  转屏幕
     function change2d () {
	   for (var i=0; i<startArr.length; i++) {
	    var x=startArr[i][0];
		var y=startArr[i][1];
		var z=startArr[i][2];
        var screenx=startWidth+x;
		var screeny=startTop+y;
		links[i].style.top=screeny+"px";
		links[i].style.left=screenx+"px";
		var jd= Math.acos(z/radius);
	    links[i].style.fontSize=startfont+8*Math.cos(jd)+"px"; 
		links[i].style.color="rgb("+parseInt(Math.random()*200)+","+parseInt(Math.random()*200)+","+parseInt(Math.random()*200)+")";
	   if(Math.cos(jd)<0.3){
	     links[i].style.opacity=0.3;
		 links[i].style.filter="alpha(opacity=30)";
	    }else{
	     links[i].style.opacity=Math.cos(jd);
		 links[i].style.filter="alpha(opacity="+Math.cos(jd)*100+")";
	    }
	   }    

	 }

	 //运动后转屏幕坐标
	  function changeS (arr,i) {
	    var x=arr[0];
		var y=arr[1];
		var z=arr[2];
        var screenx=startWidth+x;
		var screeny=startTop+y;
		startArr[i][0]=x;
        startArr[i][1]=y;
		startArr[i][2]=z;
		links[i].style.top=screeny+"px";
		links[i].style.left=screenx+"px";
		var jd= Math.acos(z/radius);
	    links[i].style.fontSize=startfont+8*Math.cos(jd)+"px"; 
	
	   if(Math.cos(jd)<0.3){
	     links[i].style.opacity=0.3;
	    }else{
	     links[i].style.opacity=Math.cos(jd);
	    }
	 }
	 //主运行函数
	 function main () {
	    create3d();
        change2d();
	 }
	//计算旋转以后的值
	 function rectmath (rectarr,xyzArr) {
	    var arr=[];
	     for (var i=0; i<rectarr.length; i++) {
		      val=0;
		     for (var j=0; j<xyzArr.length; j++) {
			   val+=rectarr[i][j]*xyzArr[j];
		     }
			 arr.push(val);
	     }  
		 return arr;
	  }
//旋转矩阵
  function rectarr (xiangl,theta) {
    var u = xiangl[0];
    var v = xiangl[1];
    var w = xiangl[2];
    var newarr=[];
    newarr[0]= [
	 Math.cos(theta) + (u * u) * (1 - Math.cos(theta)) ,
     u * v * (1 - Math.cos(theta)) + w * Math.sin(theta),
     u * w * (1 -Math.cos(theta)) - v * Math.sin(theta),
     0
	 ];

    newarr[1] = [
	 u * v * (1 - Math.cos(theta)) - w * Math.sin(theta),
     Math.cos(theta) + v * v * (1 - Math.cos(theta)),
     w * v * (1 - Math.cos(theta)) + u * Math.sin(theta),
     0
	 ];

    newarr[2]= [
	 u * w * (1 - Math.cos(theta)) + v * Math.sin(theta),
     v * w * (1 - Math.cos(theta)) - u * Math.sin(theta),
     Math.cos(theta) + w * w * (1 - Math.cos(theta)),
     0
	 ];

    newarr[3] = [
	0,
    0,
    0,
    1
	]
	return newarr;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>

<body>
<h1>后盾网PHP实训---JavaScript教学小例子</h1>
<h2>纯javascript实现的超炫3D标签云</h2>
<h3>后盾网 有实力 做后盾！</h3>
<a href="#"class="one">
   后盾网精品教程
</a>
<a href="#"class="one">
   HDPHP框架使用视频
</a>
<a href="#"class="one">
   PHP开发视频教程
</a>
<a href="#"class="one">
   XHTML网页基础教程
</a>
<a href="#"class="one">
   DIV+CSS网页布局
</a>
<a href="#"class="one">
   DEDE织梦CMS教程
</a>
<a href="#"class="one">
   Mysql数据库视频教程
</a>
<a href="#"class="one">
   DreamWeaver CS5
</a>
<a href="#"class="one">
   smarty免费视频
</a>
<a href="#"class="one">
   HDjob招聘系统使用教程
</a>
<a href="#"class="one">
   远程班培训实录视频
</a>
<a href="#"class="one">
   javascript视频
</a>
<a href="#" class="one">
   HDinfo分类信息使用教程
</a>
<a href="#"class="one">
   Linux操作系统教程 
</a>
<a href="#"class="one">
   学员实训项目视频
</a>
<a href="#"class="one">
   免费下载VIP课
</a>
<a href="#"class="one">
   原创电子产品评测
</a>
<a href="#"class="one">
   PhotoShop视频教程 
</a>
<a href="#"class="one">
   After Effects视频教程
</a>
<a href="#"class="one">
   建站知识
</a>
<a href="#"class="one">
   JQuery视频
</a>
<a href="#"class="one">
   flash视频
</a>
<a href="#"class="one">
   PHP实战视频
</a>
<a href="#"class="one">
   框架开发
</a>
<a href="#"class="one">
   商城（基于过程）
</a>
<a href="#"class="one">
   仿京东商城（基于HDPHP）
</a>
<a href="#"class="one">
   网页前台布局实战视频
</a>
<a href="#"class="one">
   微博开发
</a>
<a href="#"class="one">
   HDCMS开发教程
</a>
<a href="#"class="one">
   javascript 高级应用
</a>
<a href="#"class="one">
   网站上线运营实操
</a>
<a href="#"class="one">
   仿团800首页
</a>
<a href="#"class="one">
   仿京东网(前端)
</a>
<a href="#"class="one">
   仿凡客首页
</a>
<a href="#"class="one">
   仿hao123首页
</a>
<a href="#"class="one">
   ecshop二次开发
</a>

</body>
</html>
